<template>
  <k-form-modal
    drawer
    width="640px"
    title="操作"
    v-bind="formModalState"
    v-on="formModalEvent"
  >
    <k-table v-bind="tableState" v-on="tableEvent">
    </k-table>
  </k-form-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import { useLogsTableList } from '../hooks/use-table';
import { useFormModal } from '@crud/index';
import { getMonitorLogList } from '@/api/crm-dyj/team';

const formRef = ref();
const {
  state: paramsState,
  tableState,
  tableEvent,
  ...tableMethods
} = useLogsTableList({
  getList: (params) => {
    if (!params.account_id) return;
    return getMonitorLogList(params);
  }
});

const { formModalState, formModalEvent, ...methods } = useFormModal({
  formRef,
  model: {},
  getParams: (model) => model,
  onShow: (mode = 0, data: any) => {
    const { id } = data;
    paramsState.params.account_id = id;
    tableMethods.onSearch();
  }
});

defineExpose({
  show: methods.show
});
</script>
<style lang="scss" scoped>
.info-wrapper {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;

  .item {
    display: flex;
    flex: 50% 0;
    margin-bottom: 20px;

    .label {
      width: 100px;
      margin-right: 16px;
      color: var(--text-3);
      text-align: right;
    }
  }
}
</style>
